<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <#include "header.html">
    <title>列表</title>
    <style>
        /* 滚动条宽度 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: transparent;
        }

        /* 滚动条颜色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }

        * {
            font-size: 0
        }

        div {
            font-size: 16px;
        }

        #mainSection {
            white-space: nowrap;
            overflow-x: scroll;
            padding: 10px 0px;
        }

        #headerSec :first-child, #bodySec section :first-child, #captionSec :first-child {
            border-left: 1px solid gray;
            text-align: center;
            width: 20px;
        }

        #bodySec :last-child div {
            border-bottom: 1px solid gray;
        }

        #headerSec div, #bodySec div, #captionSec div {
            line-height: 20px;
            padding: 3px 5px;
            width: 80px;
            display: inline-block;
            margin: 0;
            border: 1px solid gray;
            border-bottom: none;
            border-left: none;
            overflow: hidden;
        }

        #captionSec div {
            border-bottom: 1px solid gray;
            text-align: center;
            min-width: 50px;
        }

        #headerSec div {
            text-align: center;
            font-weight: bolder;
            color: white;
            background-color: #38F;
        }

        #captionSec {
            margin: 10px 0px;
        }

        .showTb {
            width: 24px !important;
        }
    </style>
</head>
<body>

<section id="mainSection">
    <section id="captionSec">
        <div>6.29</div>
    </section>
    <section id="headerSec">
        <div>0</div>
        <div>模块</div>
        <div>需求</div>
        <div>任务详情</div>
        <div>研发人员</div>
        <div>产品人员</div>
        <div>研发负责人</div>
        <div>测试人员</div>
        <div>工时</div>
        <div>开始时间</div>
        <div>结束时间</div>
        <div>状态</div>
        <div class="showTb">&nbsp;</div>
    </section>
    <section id="bodySec">
        <section id="demoSection">
            <div class="id" data-id="">&nbsp;</div>
            <div class="bizName">&nbsp;</div>
            <div class="demand">&nbsp;</div>
            <div class="taskDetail">&nbsp;</div>
            <div class="developer">&nbsp;</div>
            <div class="enemy">&nbsp;</div>
            <div class="leader">&nbsp;</div>
            <div class="powerful">&nbsp;</div>
            <div class="manHour">&nbsp;</div>
            <div class="startTime">&nbsp;</div>
            <div class="endTime">&nbsp;</div>
            <div class="status">&nbsp;</div>
            <div class="showTb">&nbsp;</div>
        </section>

    </section>
</section>
</body>

<script>
    //数据对象
    let map = {};
    let list = [];
    //最大天数差
    let maxDayCount = 0;

    function initTr(i, section, data) {
        //初始化数据
        for (let t in data) {
            let value = data[t];
            let child = section.find('.' + t);
            if (child) {
                if (t == "id") {
                    child.data("id", value);
                    child.html(i + 1);
                } else {
                    child.html(value);
                }
            }
        }
        //计算时间算出天数

        //生成报表
        let firstTd = section.find(".showTb:first");
        console.log(firstTd)
        let tempTd = firstTd.clone();

    }

    function initTable() {
        let demoSection = $("#demoSection");
        for (let i = 0; i < list.length; i++) {
            let obj = list[i];
            let temp = demoSection.clone();
            demoSection.before(temp);
            temp.attr("id", obj["id"]);
            console.log(obj);
            initTr(i, temp, obj);
            temp.show();
        }
    }

    $(function () {
        jsUtil.post("query/list", {}, function (data) {
            if (!data) {
                return;
            }
            list = data.list;
            for (let i = 0; i < list.length; i++) {
                let obj = list[i];
                map[obj.id] = obj;
                //计算最大时间差
                let dayCount = 0;
                let st = obj.startTime;
                let et = obj.endTime;
                if (!st) {
                    continue;
                }
                let manHour = obj.manHour;
                if (manHour) {
                    manHour = 0;
                }
                if (!et) {
                    dayCount = manHour * 60 * 60 * 1000;
                }

            }
            console.log(map);
            initTable();
        })
        //横向
        let allH = $("#headerSec div,#bodySec section div");
        allH.mouseover(function () {
            $(this).html()
        });

        //设置最大宽度
        //  $("#mainSection").css("width", window.innerWidth + "px");
        // 设置修改
        $("#bodySec div").dblclick(function () {
            //$(this).attr("contenteditable", "true");
            $(this).html($(this).html() + "aaaaa")
        });
        $("#bodySec div").blur(function () {
            $(this).attr("contenteditable", "false");
            let height = $(this).height();
            $(this).parent("section").children().height(height);
        });

    })

</script>
</html>